<style>
</style>
<template>
    <div>
        <div class="ivu-mt">
            <el-card :bordered="false">
                <p class="card-title">
                    {{$t('message.term.doc_form')}}
                </p>
                <el-divider dashed />
                <div style="padding-right: 80px">
                    <form-create ref="fc" v-model="fApi" :rule="rule" :option="option" @lawfirm-change="onLawFirmChange"></form-create>
                </div>
                <el-divider dashed />
                <div style="text-align: right;  margin-top: 20px">
                    <div style="float: left">
                        <el-button @click="backStep()">返回</el-button>
                    </div>
                    <el-button type="success" @click="nextStep()">下一步</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import { API } from '@/customized/http/api';
/*import province_city_code from "@form-create/data/dist/province_city_code.js"*/

import MultiInput from '@/views/components/multi-input/multi-input.vue'
import AreaCascader from '@/views/components/area-cascader/area-cascader.vue'
import CourtPicker from '@/views/components/court-picker/court-picker.vue'

import AutoCompleteAssist from '@/views/components/auto-complete-assist/auto-complete-assist.vue'
import DefaultDatePicker from '@/views/components/default-datepicker/default-datepicker.vue'
import MonthSelect from '@/views/components/month-select/month-select.vue'
import SuffixInput from '@/views/components/suffix-input/suffix-input.vue'
import CascaderPlusInput from '@/views/components/cascader-plus/cascader-plus-input.vue'

import TableDataForm from '@/views/components/table-data-form/table-data-form.vue'

formCreate.component(MultiInput.name, MultiInput);
formCreate.component(AreaCascader.name, AreaCascader);
formCreate.component(CourtPicker.name, CourtPicker);

formCreate.component(AutoCompleteAssist.name, AutoCompleteAssist);
formCreate.component(DefaultDatePicker.name, DefaultDatePicker);
formCreate.component(MonthSelect.name, MonthSelect);
formCreate.component(SuffixInput.name, SuffixInput);
formCreate.component(CascaderPlusInput.name, CascaderPlusInput);
formCreate.component(TableDataForm.name, TableDataForm);

export default {
    /*从父路由注入父路由页面的函数*/
    inject: ['next', 'back'],
    components: {
       formCreate: formCreate.$form()

    },
    data() {
        return {
            timer: '',
            fApi: {},
            model: {},
            //表单生成规则
            rule: [],
            //组件参数配置
            option: {
                form: {
                    labelWidth:"150"
                },
                submitBtn: false,
                resetBtn: false
            }
        }
    },
    mounted() {
        this.model = this.fApi.model();
        this.$nextTick(() => {
            this.loadForm();
        });
    },
    beforeDestroy() {
        /* 记得销毁 */
        clearInterval(this.timer);
    },
    methods: {
        nextStep() {
            this.save();

            this.fApi.validate((isValid) => {
                if (isValid) {
                    this.next(this.$route.name);
                } else {
                    this.$message.error(this.$t('message.notice.validate_fail'));
                }
            });

        },
        backStep() {
            this.back(this.$route.name);
        },
        loadForm() {
            let docSelected = this.$store.getters.docSelected;
            let ids = docSelected.map(item => {
                return item.id;
            });
            let idList = JSON.stringify(ids);
            API.loadDocForm({ formData: idList })
                .then((res) => {
                    let $this = this; // 这样 eval中就可以使用$this来间接使用this了
                    let ruleJson = eval(res.data); // 因为当前上下文环境中存在了makerRf，所以res.data中的字符串makerRf也成功变成变量
                    this.rule = ruleJson;

                    this.restoreData();
                }).catch((error) => {
                    console.log(error);
                });
        },
        /*将用户填写的表单暂存到浏览器本地存储中，以避免用户输入太多数据，遇到宕机*/
        save() {
            let result = this.fApi.formData();
            //console.log("do save => " + JSON.stringify(result));
            this.$store.commit('saveDocForm', result);
        },
        /*讲浏览器本地保存的数据恢复到表单*/
        restoreData() {
            let formDataInStorage = this.$store.getters.docForm;
            //console.log("docForm ===> " + JSON.stringify(formDataInStorage));
            if (formDataInStorage) {
                this.rule.map(item => {
                    let valueInStorage = formDataInStorage[item.field];
                    if (valueInStorage !== undefined && valueInStorage != null) {
                        item.value = valueInStorage;
                    }
                })
            }

            /* 确保数据恢复之后再启用一个定时器，定时保存所输入的值 60000 == 60s == 1m*/
            this.timer = setInterval(this.save, 60000);
        },
        onLawFirmChange(val) {
            this.$refs.fc.value.changeValue(val.key, val.val);
        }
    }
}
</script>